<template>
	<view class="content">
		<view class="status_bar"></view>
		<view class="logo f-l-c cw">
			<view class="logoImg"></view>
			<view>欢迎登录！</view>
		</view>

		<!-- 表单 -->
		<view class="form">
			<view class="item f-c-c">
				<view class="iconLeft f-c-c">
					<image src="../../static/login/icon_phone.png" mode="widthFix"></image>
				</view>
				<input @blur="blur($event)" class="inputItem" type="text" v-model="form.mobile" placeholder="请输入手机号"
					placeholder-class="placeStyle" />
			</view>
			<view class="item f-c-c">
				<view class="iconLeft f-c-c">
					<image src="../../static/login/icon_suo.png" mode="widthFix"></image>
				</view>
				<input class="inputItem" type="password" v-model="form.password" placeholder="请输入密码"
					placeholder-class="placeStyle" />
			</view>
		</view>
		<view class="f-c-b cw f30">
			<view @click="$to(`../register/register`)">没有账户吗？立即注册</view>
			<view @click="$to(`../forgetPass/forgetPass`)">忘记密码?</view>
		</view>
		<view @click="toLogin" class="btnLogin f-c-c">登录</view>
		<view class="cw f-c-c">
			<view @click="tickFlag=!tickFlag" :class="tickFlag?'tickIconTrue f-c-c':'tickIcon'">
				<u-icon size=20 color='#FF8710' v-show="tickFlag" name='checkmark'></u-icon>
			</view>
			<view>阅读并同意<text @click="$to(`../privacyAgreement/privacyAgreement`)">《隐私协议》</text>和<text
					@click="$to(`../userAgreement/userAgreement`)">《用户协议》</text></view>
		</view>
		<view class="cw f-c-c loginThree">
			<view>第三方登录</view>
		</view>
		<u-divider class="divilder" bg-color="#FF8710">
			<image @click="$to(`../bindMobile/bindMobile`)" src="../../static/login/icon_wx.png" mode="widthFix">
			</image>
		</u-divider>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					mobile: '',
					password: ''
				},
				tickFlag: false,
				mobiFlag: false,

			}
		},
		methods: {
			blur(e) {
				if (!this.$u.test.mobile(e.target.value)) {
					this.$u.toast('请输入正确的手机号！')
				} else {
					this.mobiFlag = true
				}
			},
			async toLogin() {
				if (!this.mobiFlag) {
					this.$u.toast("请输入手机号！")
					return
				}
				console.log(this.form.password);
				if (this.form.password === '') {
					this.$u.toast("请输入密码！")
					return
				}
				if(!this.tickFlag){
					this.$u.toast("请勾选协议！")
					return
				}
				
				const {success,msg,data}=await this.$u.api.login({
					phone:this.form.mobile,
					pwd:this.form.password
				})
				if(success){
					this.$u.vuex('vuex_user',data)
					console.log(this.vuex_user);
					this.$tar(`../index/index`)
				}else{
					this.$u.toast(msg)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		height: 100vh;
		background-color: $uni-color-primary;
		padding: 0 90rpx;
		overflow-y: hidden;
	}

	.logo {
		font-size: 60rpx;
		margin-top: 100rpx;
	}

	.logoImg {
		width: 140rpx;
		height: 140rpx;
		background-color: #ffffff;
		margin-bottom: 40rpx;
		border-radius: 20rpx;
		border: 2rpx solid #707070;
	}

	/* 表单 */
	.form {
		margin: 40rpx 0 40rpx 0;
	}

	.item {
		border: 1rpx solid #FFFFFF;
		margin: 60rpx 0 0 0;
		border-radius: 10rpx;
	}

	.inputItem {
		padding: 20rpx 100rpx 20rpx 20rpx;
		border-left: 1rpx solid #FFFFFF;
	}

	.iconLeft {
		margin: 0 20rpx;
	}

	.iconLeft image {
		width: 25rpx;
	}

	.btnLogin {
		background-color: #FFFFFF;
		margin: 100rpx 0 60rpx 0;
		border-radius: 10rpx;
		height: 90rpx;
		color: $uni-color-primary;
	}

	.loginThree {
		margin: 100rpx 0 40rpx 0;
	}

	.divilder image {
		width: 80rpx;
	}

	.tickIcon,
	.tickIconTrue {
		width: 30rpx;
		height: 30rpx;
		border: 1rpx solid #FFFFFF;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.tickIconTrue {
		background-color: #FFFFFF;
	}

	input {
		color: #FFFFFF;
	}

	.placeStyle{
		color: #FFFFFF;
		font-size: 30rpx;
	}
</style>
